<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>props基本使用</title>
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test1"></div>
	<div id="test2"></div>
	<div id="test3"></div>



	<script type="text/babel">
		//创建组件
		class Person extends React.Component {
			state = { msg: '你好' }
			render() {
				const { name, sex, age } = this.props
				return (
					<ul>
						<li>姓名:{name}</li>
						<li>性别:{sex}</li>
						<li>年龄:{age + 1}</li>
					</ul>
				)
			}
		}

		//渲染组件到页面
		ReactDOM.render(<Person name="tom" sex="女" age={18} />, document.querySelector('#test1'))
		ReactDOM.render(<Person name="jerry" sex="男" age={19} />, document.querySelector('#test2'))

		const p = { name: '张三', sex: '男', age: 20 }
		// ReactDOM.render(<Person name={p.name} sex={p.sex} age={p.age} />, document.querySelector('#test3'))
		// 在React+babel的作用下,可以使用js展开对象,且仅限于在组件标签中(传递props,传递标签属性)
		ReactDOM.render(<Person {...p} />, document.querySelector('#test3'))
	</script>
</body>

</html>